<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card>
    <el-row>
      <el-input
        style="max-width: 600px"
        placeholder=""
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </el-row>
    <el-table
      :data="ordersList"
      border
      stripe
      class="table-top"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="80px" />
      <el-table-column label="订单编号" prop="order_number" />
      <el-table-column label="订单价格" prop="order_price" />
      <el-table-column label="是否付款" prop="pay_status">
        <template #default="scope">
          <el-tag v-if="scope.row.pay_status == 1" type="success"
            >已付款</el-tag
          >
          <el-tag v-if="scope.row.pay_status == 0" type="danger">未付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否发货" prop="is_send" />
      <el-table-column label="下单时间" prop="create_time"
        ><template v-slot="{ row }">
          {{ $filters.filtersTimes(row.create_time) }}
        </template></el-table-column
      >
      <el-table-column label="操作">
        <template #default="">
          <el-button type="primary" icon="" @click="handleDialogValue()"
            >修改地址
          </el-button>
          <el-button
            type="success"
            :icon="el - icon - location"
            @click="progressDialogValue()"
            >物流进度
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[2, 5, 10, 15]"
      :size="queryInfo.pagenum"
      :disabled="disabled"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="page-margin"
    />
  </el-card>
  <el-dialog
    v-model="addressVisible"
    title="修改地址"
    width="30%"
    @close="addresshandleClose"
  >
    <el-form
      ref="addressFormRef"
      style="max-width: 600px"
      :model="addressForm"
      :rules="addressFormrules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="省/市/区" prop="address">
        <el-input v-model="addressForm.address" />
      </el-form-item>
      <el-form-item label="收货人" prop="name">
        <el-input v-model="addressForm.name" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="addressForm.phone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addressVisible = false">取消</el-button>
        <el-button type="primary" @click="addressVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="progressVisible" title="物流进度" width="30%">
    <el-timeline style="max-width: 600px">
      <el-timeline-item
        v-for="(activity, index) in progressInfo"
        :key="index"
        :timestamp="activity.time"
        type="success"
      >
        {{ activity.context }}
      </el-timeline-item>
    </el-timeline>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="progressVisible = false">取消</el-button>
        <el-button type="primary" @click="progressVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { getOrderLists } from '@/api/orders'
const progressVisible = ref(false)
const progressInfo = ref([
  {
    time: '2018-05-10 09:39:00',
    ftime: '2018-05-10 09:39:00',
    context: '已签收,感谢使用顺丰,期待再次为您服务',
    location: ''
  },
  {
    time: '2018-05-10 08:23:00',
    ftime: '2018-05-10 08:23:00',
    context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
    location: ''
  },
  {
    time: '2018-05-10 07:32:00',
    ftime: '2018-05-10 07:32:00',
    context: '快件到达 [北京海淀育新小区营业点]',
    location: ''
  },
  {
    time: '2018-05-10 02:03:00',
    ftime: '2018-05-10 02:03:00',
    context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
    location: ''
  },
  {
    time: '2018-05-09 23:05:00',
    ftime: '2018-05-09 23:05:00',
    context: '快件到达 [北京顺义集散中心]',
    location: ''
  },
  {
    time: '2018-05-09 21:21:00',
    ftime: '2018-05-09 21:21:00',
    context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
    location: ''
  },
  {
    time: '2018-05-09 13:07:00',
    ftime: '2018-05-09 13:07:00',
    context: '顺丰速运 已收取快件',
    location: ''
  },
  {
    time: '2018-05-09 12:25:03',
    ftime: '2018-05-09 12:25:03',
    context: '卖家发货',
    location: ''
  },
  {
    time: '2018-05-09 12:22:24',
    ftime: '2018-05-09 12:22:24',
    context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
    location: ''
  },
  {
    time: '2018-05-08 21:36:04',
    ftime: '2018-05-08 21:36:04',
    context: '商品已经下单',
    location: ''
  }
])
const addressForm = ref({
  address: [],
  name: '',
  phone: ''
})
const addressFormrules = ref({
  address: [
    { required: true, message: '请输入省/市/区', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入收货人', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
  ]
})
const progressDialogValue = async () => {
  progressVisible.value = true
}
const addressVisible = ref(false)
const queryInfo = ref({
  qurey: '',
  pagenum: 1,
  pagesize: 10
})
const total = ref(0)
const ordersList = ref([])
const getOrdersList = async () => {
  const res = await getOrderLists(
    queryInfo.value.pagenum,
    queryInfo.value.pagesize
  )
  console.log(res)
  ordersList.value = res.goods
  total.value = res.total
}
getOrdersList()
const handleSizeChange = (newSize) => {
  queryInfo.value.pagesize = newSize
  getOrdersList()
}
const handleCurrentChange = (newPage) => {
  queryInfo.value.pagenum = newPage
  getOrdersList()
}
const handleDialogValue = () => {
  addressVisible.value = true
}
const addressFormRef = ref(null)
const addresshandleClose = () => {
  addressFormRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.table-top {
  margin: 30px 0px;
}
</style>
